<template>
  <button @click="toggleFullscreen">
    {{ isFullscreen ? 'Exit Fullscreen' : 'Go Fullscreen' }}
  </button>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import screenfull from 'screenfull';

const isFullscreen = ref(false); // 用于存储当前是否为全屏状态

// 监听全屏变化
const change = () => {
  isFullscreen.value = screenfull.isFullscreen;
};

// 切换全屏模式
const toggleFullscreen = () => {
  if (screenfull.isEnabled) {
    screenfull.toggle();
    isFullscreen.value = screenfull.isFullscreen;
  }
};

// 设置侦听器
onMounted(() => {
  screenfull.on('change', change);
});

// 删除侦听器
onUnmounted(() => {
  screenfull.off('change', change);
});

</script>

<style scoped></style>
